import React, { useEffect, useState } from 'react';
import { Empty } from 'antd';
import DataSet from '@antv/data-set';
import { Interval, Axis, Chart, Coordinate, Legend, Tooltip, View } from 'bizcharts';

const ds = new DataSet();
export default ({ summaryData }) => {
  const [sumPieChartData, setSumPieChartData] = useState([]);

  useEffect(() => {
    if (summaryData?.length) {
      // 加工数据
      // 按分值倒序
      let dv = ds
        .createView()
        .source(summaryData)
        .transform({
          type: 'rename',
          map: {
            typeName: 'x',
            score: 'y',
          },
        });
      setSumPieChartData(dv.rows);
    }
  }, [summaryData]);

  return sumPieChartData?.length ? (
    <Chart
      data={sumPieChartData}
      autoFit
      appendPadding={[15, 0, 15, 0]}
      scale={{
        scale: {
          y: {
            formatter: (val) => {
              const newVal = (val * 100).toFixed(2) + '%';
              return newVal;
            },
          },
        },
      }}
    >
      <Coordinate type="theta" radius={0.8} />
      <Axis visible={false} />
      <Tooltip showTitle={false} />
      <Legend visible={false} />
      <Axis visible={false} />
      <Tooltip showTitle={false} />
      <Interval
        adjust="stack"
        position="y"
        color="x"
        shape="sliceShape"
        label={[
          'y',
          { offset: 40 },
          {
            content: (data) => {
              if (typeof labelFormatter === 'function') {
                return labelFormatter(data);
              }
              return `${data.x}:${data.y}`;
            },
            offset: 22,
          },
        ]}
      />
    </Chart>
  ) : (
    <Empty />
  );
};
